<template>
	<div class="ani_wrapper">
		<img v-for="(item,index) in ani_arr" :src="item" :alt="index" :style="{'opacity':curIndex==index?'1':'0'}">
	</div>
</template>

<script>
	import DataAni from "@/data/animation.json";
	// 使用图片预加载,提前请求图片
	
	let count = 0;
	function preloadImg(src){
		var img = new Image()
		img.src = src;
		img.onload = function(){
			count++
		}
	}
	DataAni.forEach((src)=>preloadImg(src))
	let timer = null;
	export default{
		data(){
			return{
				curIndex:0,
				ani_arr: DataAni
			}
		},
		mounted() {
			timer = setInterval(()=>{
				this.curIndex++;
				if(this.curIndex>this.ani_arr.length){
					this.curIndex=0
				}
			},36)
		}
	}
</script>

<style lang="scss" scoped>
	@function px2vw($px){
		@return $px/7.5*1vw
	};
	.ani_wrapper{
		position: absolute;
		width: px2vw(698);
		height: px2vw(698);
		
		left: 50%;
		margin-left: px2vw(-349);
		top: px2vw(-30);
		>img{
			position: absolute;
			top: 0;
			left: 0;
			width: px2vw(698);
			height: px2vw(698);
			opacity: 0;
		}
	}
</style>
